<template>
  <div id="app" style="background-color: #F6F1EB ;margin-top: -30px" >
    <el-header style="background-color: black;color: white;width: 1000px; line-height: 60px;text-align: center;margin: 0 0 0 365px">
      <div >
        <p style=" text-decoration: none;font-weight: bold;font-size: 30px">领养申请表</p>
      </div>
    </el-header>
    <div style="background-color: white;width: 1000px;margin: 0 0 0 365px">
      <el-main style="width: 1000px;height: 750px;margin: 0 auto">
        <el-form label-width="80px">
          <div class="col-md-12 text-center">
            <img style="width: 150px; height: 150px;margin: 0 0 0 400px" :src="url">
            <p style="margin-top: 20px; text-decoration: none;text-align: center;color: coral;font-size: 20px">金渐层领养</p>
          </div>
          <el-form-item label="我的地址">
            <el-input v-model="p.address"  placeholder="江苏省南京市雨花台区" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="p.contact"  placeholder="潘先生" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="p.phone"  placeholder="13888888888" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="QQ号码">
            <el-input v-model="p.number"  placeholder="111111111" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="微信号">
            <el-input v-model="p.wechat"  placeholder="tedu2209" style="width: 400px"></el-input>
          </el-form-item>

          <el-form-item label="领养条件">
            <el-input
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 6}"
                placeholder="请输入内容"
                v-model="textarea">
            </el-input>
          </el-form-item>
          <template>
            <el-button style="margin: 0 0 0 80px" type="success" @click="open()">确认领养</el-button>
          </template>
        </el-form>
      </el-main>
    </div>
    <el-footer>

    </el-footer>
  </div>
</template>

<script>
export default {
  name: "AdoptionView"
}
let v = new Vue({
  el: '#app',
  data: function () {
    return {
      textarea: '',
      arr:[],
      input:"",
      url: 'http://i1.bagong.cn/18/07/965d3eaf36adb9b1178a927d0f0c_200x200_1.',
      p:{
        address:"",
        contact:"",
        phone:"",
        number:"",
        wechat:"",
      }
    }
  },
  methods: {
    open() {
      this.$alert('关爱动物,人人有责', '动物领养小科普', {
        confirmButtonText: '已了解',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${ action }`
          });
        }
      });
    }
  }
})

</script>

<style scoped>

</style>